<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="planes.css"/>
	</head>
	<body>
		<div id="body_main" class="main">
			<ul id="options" class="options">
				<li value="1">20</li>
				<li value="2">10</li>
				<li value="3">5</li>
				<li value="4">1</li>
			</ul>
		</div>
	</body>
</html>
<script>
	window.onload = function(){
		new Engine();
	}
	class Plane{
		constructor(){
			this.ele = createEle("div","my-warplain");
			this.bullet = [];
		}
		init(){
			appendBody(this.ele);
			this.ele.style.left = document.documentElement.clientWidth/2 -this.ele.offsetWidth/2 + "px";
			this.ele.style.top = document.documentElement.clientHeight - this.ele.offsetHeight + "px";
			this.sport();
		}
		sport(){
			const body_main = document.getElementById("body_main");
			document.onmousemove = function(evt){
				const e = evt || window.event;
				let left = e.pageX - this.ele.offsetWidth/2 ;
				let top = e.pageY - this.ele.offsetHeight/2;
				if(left <= body_main.offsetLeft){
					left = body_main.offsetLeft;
				}else if(left >= body_main.offsetLeft + body_main.offsetWidth - this.ele.offsetWidth){
					left = body_main.offsetLeft + body_main.offsetWidth - this.ele.offsetWidth;
				}
				this.ele.style.left = left + "px";
				this.ele.style.top = top + "px";
			}.bind(this)
		}
		fire(frequecy){
			let defaultFrequecy = 200;
			switch(frequecy){
				case 0 : defaultFrequecy = 600; break;
				case 1 : defaultFrequecy = 400; break;
				case 2 : defaultFrequecy = 200; break;
				case 3 : defaultFrequecy = 50;
			}
			let id = 0;
			setInterval(function(){
				this.bullet.push(new Bullet(id));
				id ++;
			}.bind(this),defaultFrequecy);
		}
	}
	let myPlane = new Plane();
	class Engine{
		constructor(){
			this.ele = document.getElementById("body_main");
			this.oList = document.getElementsByTagName("li");
			this.init();
		}
		init(){
			const that = this;
			for(let i = 0;i < this.oList.length;i ++){
				this.oList[i].onclick = function(){
					this.parentNode.remove(this);
					that.loadPage();
					that.frequecy = this.index;
				}
			}
		}		
		loadPage(){
			this.logo = createEle("div","logo");
			appendBody(this.logo);
			this.loading = createEle("div","loading");
			appendBody(this.loading);
			let index = 1;
			this.timer = setInterval(function(){
				this.loading.style.background = "url(images/loading"+(index ++ % 3 + 1)+".png) no-repeat";
			}.bind(this),500);
			let positionY = 0;
			setInterval(function(){
				this.ele.style.backgroundPositionY = ++ positionY + "px";
			}.bind(this),50);
			setTimeout(function(){
				this.logo.remove();
				this.loading.remove();
				clearInterval(this.timer);
				this.startGame();
			}.bind(this),3000);
		}
		startGame(){
			myPlane.init();
			myPlane.fire(this.frequecy);
			this.createEnemy();
		}
		createEnemy(){
			setInterval(function(){
				Math.random() > 0.6 ? new Enemy(0) : "";
			},1000);
			setInterval(function(){
				Math.random() > 0.4 ? new Enemy(1) : "";
			},3000);
			setInterval(function(){
				Math.random() > 0.2 ? new Enemy(2) : "";
			},5000);
		}
	}
	class Bullet{
		constructor(id){
			this.id = id;
			this.ele = createEle("div","bullet");
			this.init();
		}
		init(){
			this.ele.id = this.id;
			appendBody(this.ele);
			this.ele.style.left = myPlane.ele.offsetLeft + myPlane.ele.offsetWidth/2 - this.ele.offsetWidth/2 + "px";
			this.ele.style.top = myPlane.ele.offsetTop - this.ele.offsetHeight + "px";
			this.sport();
		}
		sport(){
			this.timer = setInterval(function(){
				this.ele.style.top = this.ele.offsetTop - 15 + "px";
				if(this.ele.style.top < 15){
					this.ele.boom();
				}
			}.bind(this),50);
		}
		boom(){
			this.ele.className = "bullet-die";
			clearInterval(this.timer);
			setTimeout(function(){
				this.ele.remove();
				for(let i = 0;i < myPlane.bullet.length;i ++){
				 if(this.ele.id == myPlane.bullet[i].id){
					myPlane.bullet.push(i,1);
				}
			}
		  }.bind(this),100)
			
		}
	}
	class Enemy{
		constructor(type){
			this.type = type;
			this.init();
		}
		init(){
			switch(this.type){
				case 0 : this.ele = createEle("div","enemy-small")
				         this.ph = 1;
				         this.speed = 20;
				         break;
				case 1 : this.ele =createEle("div","enemy-middle")
				         this.ph = 5;
				         this.speed = 10;
				         break;
				case 2 : this.ele = createEle("div","enemy-large")
				         this.ph = 10;
				         this.speed = 5;
			}
			appendBody(this.ele);
			this.position();
		}
		position(){
			    const body_main = document.getElementById("body_main");
				this.ele.style.left = randInt(body_main.offsetLeft,body_main.offsetLeft + body_main.offsetWidth - this.ele.offsetWidth) + "px";
			    this.ele.style.top = 0;
			    this.sport();
		}
		sport(){
			this.timer = setInterval(function(){
				this.ele.style.top = this.ele.offsetTop + this.speed + "px";
				if(this.ele.offsetTop >= document.documentElement.clientHeight){
					this.ele.remove();
					clearInterval(this.timer)
					 
				};
				   this.collision();
			}.bind(this),50);
		}
		collision(){
			for(let i = 0;i < myPlane.bullet.length;i ++){
				if(!(myPlane.bullet[i].ele.offsetLeft + myPlane.bullet[i].ele.offsetWidth < this.ele.offsetLeft || this.ele.offsetLeft + this.ele.offsetWidth < myPlane.bullet[i].ele.offsetLeft)){
				 if(!(myPlane.bullet[i].ele.offsetTop + myPlane.bullet[i].ele.offsetHeight < this.ele.offsetTop || this.ele.offsetTop + this.ele.offsetHeight < myPlane.bullet[i].ele.offsetTop)){
					myPlane.bullet[i].boom();
					this.ph--;
					if(this.ph <= 0){
						this.ele.remove();
					}
				}
			}
		}
	}
			
 }
	function createEle(target,className){
		var ele = document.createElement(target);
		ele.className = className;
		return ele;
	}
	function appendBody(ele){
		document.body.appendChild(ele);
	}
	Element.prototype.remove = function(){
		this.parentNode.removeChild(this);
	}
	function randInt(min,max){
		return Math.floor(Math.random()*(max - min + 1) + min);
	}
</script>